<template>
  <div>
    <div>
      <canvas id="s-canvas"
        :width="contentWidth"
        :height="contentHeight"
        @click="getNewCode" />
      <!-- <el-button type="primary" @click="matching">验证</el-button> -->
    </div>
  </div>
</template>

<script>
export default {
  name: 'CodeImg',
  props: ['inputCode'],
  data() {
    return {
      contentWidth: 100,
      contentHeight: 40,
      codeCaptcha: ''
    }
  },
  mounted() {
    this.getCanvas()
  },
  methods: {
    // 生成4位数的随机验证码
    getCodeCaptcha() {
      this.codeCaptcha = ''
      const codeList = [
        '0',
        '1',
        '2',
        '3',
        '4',
        '5',
        '6',
        '7',
        '8',
        '9',
        'q',
        'w',
        'e',
        'r',
        't',
        'y',
        'u',
        'i',
        'o',
        'p',
        'a',
        's',
        'd',
        'f',
        'g',
        'h',
        'j',
        'k',
        'l',
        'z',
        'x',
        'c',
        'v',
        'b',
        'n',
        'm',
        'Q',
        'W',
        'E',
        'R',
        'T',
        'Y',
        'U',
        'I',
        'O',
        'P',
        'A',
        'S',
        'D',
        'F',
        'G',
        'H',
        'J',
        'K',
        'L',
        'Z',
        'X',
        'C',
        'V',
        'B',
        'N',
        'M'
      ]
      let i = 0
      let num = 0
      for (; i < 4; ++i) {
        codeList.sort(function () {
          return 0.5 - Math.random()
        })
        num = this.randomNum(61, 0)
        this.codeCaptcha += codeList[num]
      }
    },
    randomNum(max, min) {
      return Math.round(Math.random() * (max - min) + min + 1)
    },
    getNewCode() {
      this.getCanvas()
    },
    getRgbNum() {
      const r = this.randomNum(256, 0)
      const g = this.randomNum(256, 0)
      const b = this.randomNum(256, 0)
      const a = this.randomNum(256, 0)
      return 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')'
    },
    getCanvas() {
      this.getCodeCaptcha()
      const canvas = document.getElementById('s-canvas')
      const ctx = canvas.getContext('2d')
      ctx.fillStyle = this.getRgbNum() // 填充的颜色
      // ctx.strokeStyle = this.getRgbNum() // 边框的颜色
      ctx.fillRect(0, 0, this.contentWidth, this.contentHeight) // 画一个矩形
      // ctx.strokeRect(0, 0, this.contentWidth, this.contentHeight) // 画一个矩形框
      for (let i = 0; i < 4; i++) {
        ctx.fillStyle = this.getRgbNum()
        ctx.font = this.randomNum(40, 30) + 'px SimHei' // 字体大小
        ctx.fillText(this.codeCaptcha[i], 20 + i * 15, this.randomNum(40, 30)) // 写文本
      }
      for (let i = 0; i < 3; i++) {
        ctx.strokeStyle = this.getRgbNum()
        ctx.beginPath() // 开始一条路径
        ctx.moveTo(this.randomNum(0, this.contentWidth), this.randomNum(0, this.contentHeight)) // 路径的起点
        ctx.lineTo(this.randomNum(0, this.contentWidth), this.randomNum(0, this.contentHeight)) // 路径的终点
        ctx.stroke() // 画线
      }
      for (let i = 0; i < 10; i++) {
        ctx.fillStyle = this.getRgbNum()
        ctx.beginPath()
        // 画弧线arc(x,y,r,sAngle,eAngle,counterclockwise)
        // (x,y)圆心，r半径，sAngle弧的起始角度（弧的圆形的三点钟方向为0度），eAngle弧的结束角度，counterclockwise顺时针还是逆时针画弧，false顺，true逆
        ctx.arc(this.randomNum(0, this.contentWidth), this.randomNum(0, this.contentHeight), 1, 0, 2 * Math.PI)
        ctx.fill() // 填充，也可以用stroke，但是点会比较大
      }
    },
    matching() {
      if (this.inputCode.toLowerCase() === this.codeCaptcha.toLowerCase()) {
        this.$emit('success', 1)
      } else {
        this.$emit('success', 2)
        this.$message.error('验证码错误')
        this.getCanvas()
      }
    }
  }
}
</script>

<style scoped></style>
